{% extends 'admin_panel/base.html' %}

{% block title %}管理员登录 - 旅行记录管理系统{% endblock %}
{% block page_title %}管理员登录{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title text-center mb-0">管理员登录</h4>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        {% for field, errors in form.errors.items %}
                            {% for error in errors %}
                                <strong>登录失败：</strong>{{ error }}
                            {% endfor %}
                        {% endfor %}
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required autofocus>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登录
                        </button>
                    </div>
                </form>

                <hr>
                
                <div class="text-center">
                    <p class="text-muted mb-2">或者使用Django管理员登录</p>
                    <a href="{% url 'admin:login' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-shield-lock me-2"></i>Django管理员登录
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.card {
    margin-top: 3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
}
</style>
{% endblock %}
